import React, {Component} from 'react';
import {Button, Row, Col, Input, Form, Table, Modal, Select, Upload, Icon, Radio, TimePicker} from 'antd';
import MapComponent from '../components/MapComponent';
import app from '../AppMethod';
import {setting} from "../value";
import {Consumer} from "../store";
import '../css/storeInfo.css';
import moment from 'moment';

const Option = Select.Option;
const FormItem = Form.Item;
const {TextArea} = Input;
const RadioGroup = Radio.Group;

class Setting extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            optionValue: [],
            editVisible: false,
            addConfirmLoading: false,
            value: 1,
            orderNumber: 1,
            isChange: false,
            orderText: "取号",
            isChange1: false,
        }
    };

    formItemLayout = {
        labelCol: {span: 8},
        wrapperCol: {span: 12},
    };

    render() {
        const {orderNumber, isChange, orderText, isChange1} = this.state;
        return (
            <div style={{padding: '0px',background:'#f0f2f5'}}>
                <Row gutter={{xs: 8, sm: 16, md: 32, lg: 32, xl: 32}}>
                    <Col xs={24} sm={24} md={24} lg={12} xl={12} className="storeCardItem">
                        <div className="storeCardItemContainer">
                            <div className="storeCardItemContainerTitle">店铺设置</div>
                            <div className="storeCardItemContainerContent">
                                <StoreSettings/>
                            </div>
                        </div>
                    </Col>
                    <Col xs={24} sm={24} md={24} lg={12} xl={12} className="storeCardItem">
                        <div className="storeCardItemContainer">
                            <div className="storeCardItemContainerTitle">营业时间设置</div>
                            <div className="storeCardItemContainerContent">
                                <WorkTimeSettings/>
                            </div>
                        </div>
                    </Col>

                </Row>
                <Row gutter={{xs: 8, sm: 16, md: 32, lg: 32, xl: 32}}>
                    <Col xs={24} sm={24} md={24} lg={12} xl={12} className="storeCardItem">
                        <div className="storeCardItemContainer">
                            <div className="storeCardItemContainerTitle">预约设置</div>
                            <div className="storeCardItemContainerContent">
                                <AppointmentSettings/>
                            </div>
                        </div>
                    </Col>
                    <Col xs={24} sm={24} md={24} lg={12} xl={12} className="storeCardItem">
                        <div className="storeCardItemContainer">
                            <div className="storeCardItemContainerTitle">运营设置</div>
                            <div className="storeCardItemContainerContent">
                                <div className="operateItem">
                                    <div className="operateItemText">是否需要取餐号</div>
                                    <div className="operateItemOrderNumber">
                                        {
                                            isChange ?
                                                <Input value={orderNumber} onChange={this.handleInputOnchange}
                                                       onPressEnter={(e) => this.handleOnPressEnter(e)}/>
                                                :
                                                <span onClick={() => this.handleOnClickChange()}>{orderNumber}</span>
                                        }
                                    </div>
                                    <div className="operateItemRadio">
                                        <RadioGroup onChange={this.onChange} value={this.state.value}
                                                    style={{paddingTop: 0}}>
                                            <Radio value={1}>是</Radio>
                                            <Radio value={2}>否</Radio>
                                        </RadioGroup>
                                    </div>
                                    <div className="operateItemOperate">
                                        {
                                            isChange1 ?
                                                <Input value={orderText} onChange={this.handleInputOnchange1}
                                                       onPressEnter={(e) => this.handleOnPressEnter1(e)}/>
                                                :
                                                <span onClick={() => this.handleOnClickChange1()}>{orderText}</span>
                                        }
                                    </div>
                                    <div className="operateItemImg">
                                        <img />
                                    </div>
                                </div>
                                <div className="operateItem">
                                    <div className="operateItemText">是否开通外卖服务</div>
                                    <div className="operateItemOrderNumber">2</div>
                                    <div className="operateItemRadio">
                                        <RadioGroup onChange={this.onChange} value={this.state.value}
                                                    style={{paddingTop: 0}}>
                                            <Radio value={1}>是</Radio>
                                            <Radio value={2}>否</Radio>
                                        </RadioGroup>
                                    </div>
                                    <div className="operateItemOperate">外卖</div>
                                    <div className="operateItemImg">
                                        <img />
                                    </div>
                                </div>
                                <div className="operateItem">
                                    <div className="operateItemText">是否开通店内点餐服务</div>
                                    <div className="operateItemOrderNumber">3</div>
                                    <div className="operateItemRadio">
                                        <RadioGroup onChange={this.onChange} value={this.state.value}
                                                    style={{paddingTop: 0}}>
                                            <Radio value={1}>是</Radio>
                                            <Radio value={2}>否</Radio>
                                        </RadioGroup>
                                    </div>
                                    <div className="operateItemOperate">点餐</div>
                                    <div className="operateItemImg">
                                        <img />
                                    </div>
                                </div>
                                <div className="operateItem">
                                    <div className="operateItemText">是否开通预约服务</div>
                                    <div className="operateItemOrderNumber">4</div>
                                    <div className="operateItemRadio">
                                        <RadioGroup onChange={this.onChange} value={this.state.value}
                                                    style={{paddingTop: 0}}>
                                            <Radio value={1}>是</Radio>
                                            <Radio value={2}>否</Radio>
                                        </RadioGroup>
                                    </div>
                                    <div className="operateItemOperate">预约</div>
                                    <div className="operateItemImg">
                                        <img />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </Col>
                </Row>
            </div>
        )
    };

    componentDidMount() {
    };

    componentWillUnmount() {
        this.setState = (count, callback) => {
            return;
        }
    };

    /**
     * 处理单选按钮变化事件
     */
    onChange = (e) => {
        this.setState({value: e.target.value});
    };

    /**
     * 处理输入框的显示
     */
    handleOnClickChange() {
        if (!this.state.isChange) {
            this.setState({isChange: true});
        }
    };

    /**
     * 处理序号输入框变化事件
     * @param e
     */
    handleInputOnchange = (e) => {
        this.setState({orderNumber: e.target.value});
    };

    handleOnPressEnter(e) {
        this.setState({isChange: false});
    };

    /**
     * 处理输入框的显示
     */
    handleOnClickChange1() {
        if (!this.state.isChange1) {
            this.setState({isChange1: true});
        }
    };

    /**
     * 处理序号输入框变化事件
     * @param e
     */
    handleInputOnchange1 = (e) => {
        this.setState({orderText: e.target.value});
    };

    handleOnPressEnter1(e) {
        this.setState({isChange1: false});
    }
};
const Settings = Form.create()(Setting);

class StoreSetting extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editVisible: false,
            addConfirmLoading: false,
            imageUrl: '',
            loading: false
        }
    };

    formItemLayout = {
        labelCol: {span: 8},
        wrapperCol: {span: 12}
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        const {imageUrl} = this.state.imageUrl;
        const uploadButton = (
            <div>
                <Icon type={this.state.loading ? 'loading' : 'plus'}/>
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        return (
            <span>
                <Row className="formItemContainer">
                    <Col offset={1} span={22}>
                        <Form className="login-form">
                            <FormItem label="店铺LOGO" {...this.formItemLayout} className="formItemStyle">
                                {
                                    <Upload
                                        name="avatar"
                                        listType="picture-card"
                                        className="avatar-uploader"
                                        showUploadList={false}
                                        action="//jsonplaceholder.typicode.com/posts/"
                                        onChange={this.handleChange}
                                    >
                                        {imageUrl ? <img src={imageUrl} alt="avatar"/> : uploadButton}
                                    </Upload>
                                }
                            </FormItem>
                            <FormItem label="商家名称" {...this.formItemLayout} className="formItemStyle">
                                {
                                    getFieldDecorator('logistics_address', {
                                        rules: [{required: true, message: '请输入地址'}]
                                    })(
                                        <Input placeholder="请输入" type="text"/>
                                    )
                                }
                            </FormItem>
                            <FormItem label="商家电话" {...this.formItemLayout} className="formItemStyle">
                                {
                                    getFieldDecorator('logistics_phone', {
                                        rules: [{required: true, message: '请输入电话'}]
                                    })(
                                        <Input placeholder="请输入"/>
                                    )
                                }
                            </FormItem>
                            <FormItem label="店铺地址" {...this.formItemLayout} className="formItemStyle">
                                {
                                    getFieldDecorator('logistics_phone', {
                                        rules: [{required: true, message: '请输入电话'}]
                                    })(
                                        <Input placeholder="请输入"/>
                                    )
                                }
                            </FormItem>
                            <FormItem label="店铺资质" {...this.formItemLayout} className="formItemStyle">
                                {
                                    getFieldDecorator('logistics_phone', {
                                        rules: [{required: true, message: '请输入电话'}]
                                    })(
                                        <Upload
                                            name="avatar"
                                            listType="picture-card"
                                            className="avatar-uploader UploadStyle"
                                            showUploadList={false}
                                            action="//jsonplaceholder.typicode.com/posts/"
                                            onChange={this.handleChange}
                                        >
                                            {uploadButton}
                                        </Upload>
                                    )
                                }
                            </FormItem>
                            <FormItem label="商家简介" {...this.formItemLayout} className="formItemStyle">
                                {
                                    getFieldDecorator('logistics_phone', {
                                        rules: [{required: true, message: '请输入商家简介'}]
                                    })(
                                        <TextArea rows={2} placeholder="请输入" autosize={false}/>
                                    )
                                }
                            </FormItem>
                            <FormItem style={{textAlign: 'center'}}>
                               <Button type={'primary'}>保存并设置</Button>
                            </FormItem>
                        </Form>
                    </Col>
                </Row>
            </span>
        )
    };

    clickOk() {

    };

    getBase64 = function (img, callback) {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    };

    handleChange = (info) => {
        if (info.file.status === 'uploading') {
            this.setState({loading: true});
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            this.setState({
                imageUrl: info.file.name,
                loading: false,
            });
        }
        console.log(this.state.imageUrl);
    }

};
const StoreSettings = Form.create()(StoreSetting);

class WorkTimeSetting extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editVisible: false,
            addConfirmLoading: false,
            value: 1
        }
    };

    formItemLayout = {
        labelCol: {span: 8},
        wrapperCol: {span: 12}
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        const uploadButton = (
            <div>
                <Icon type={this.state.loading ? 'loading' : 'plus'}/>
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        return (
            <span>
                <Row className="formItemContainer">
                    <Col offset={1} span={22}>
                        <Form className="login-form" style={{marginTop: 90}}>

                            <FormItem label="是否营业" {...this.formItemLayout} className="formItemStyle">
                                {

                                    <RadioGroup onChange={this.onChange} value={this.state.value}
                                                style={{paddingTop: 0}}>
                                        <Radio value={1}>营业中</Radio>
                                        <Radio value={2}>休息</Radio>
                                    </RadioGroup>

                                }
                            </FormItem>
                            <FormItem label="上午营业时间" {...this.formItemLayout} className="formItemStyle">
                                {
                                    getFieldDecorator('logistics_phone', {
                                        rules: [{required: true, message: '请输入电话'}]
                                    })(
                                        <Input placeholder="请输入"/>
                                    )
                                }
                            </FormItem>
                            <FormItem label="下午营业时间" {...this.formItemLayout} className="formItemStyle">
                                {
                                    getFieldDecorator('logistics_phone', {
                                        rules: [{required: true, message: '请输入电话'}]
                                    })(
                                        <Input placeholder="请输入"/>
                                    )
                                }
                            </FormItem>
                            <FormItem style={{textAlign: 'center', marginTop: '170px'}}>
                               <Button type={'primary'}>保存并设置</Button>
                            </FormItem>
                        </Form>
                    </Col>
                </Row>
            </span>
        )
    };

    clickOk() {

    };

    /**
     * 处理单选事件
     */
    onChange = (e) => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });
    }
};
const WorkTimeSettings = Form.create()(WorkTimeSetting);

class AppointmentSetting extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editVisible: false,
            addConfirmLoading: false,
            value: 1
        }
    };

    formItemLayout = {
        labelCol: {span: 8},
        wrapperCol: {span: 12}
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        const uploadButton = (
            <div>
                <Icon type={this.state.loading ? 'loading' : 'plus'}/>
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        return (
            <span>
                <Row className="formItemContainer">
                    <Col offset={1} span={22}>
                        <Form className="login-form" style={{marginTop: 10}}>

                            <FormItem label="预约是否需要付款" {...this.formItemLayout} className="formItemStyle">
                                {

                                    <RadioGroup onChange={this.onChange} value={this.state.value}
                                                style={{paddingTop: 0}}>
                                        <Radio value={1}>开启</Radio>
                                        <Radio value={2}>关闭</Radio>
                                    </RadioGroup>

                                }
                            </FormItem>
                            <FormItem label="起送价" {...this.formItemLayout} className="formItemStyle">
                                {
                                    getFieldDecorator('logistics_price1', {
                                        rules: [{required: true, message: '请输入起送价'}]
                                    })(
                                        <Input placeholder="请输入"/>
                                    )
                                }
                            </FormItem>
                            <FormItem label="配送费" {...this.formItemLayout} className="formItemStyle">
                                {
                                    getFieldDecorator('logistics_price2', {
                                        rules: [{required: true, message: '请输入配送费'}]
                                    })(
                                        <Input placeholder="请输入"/>
                                    )
                                }
                            </FormItem>
                            <FormItem label="配送范围" {...this.formItemLayout} className="formItemStyle">
                                <div style={{display: 'flex'}}>
                                {
                                    getFieldDecorator('logistics_price3', {
                                        rules: [{required: true, message: '请输入配范围'}]
                                    })(
                                        <Input placeholder="请输入"/>
                                    )
                                }<span style={{marginLeft: 5}}>km</span>
                                </div>
                            </FormItem>
                            <FormItem label="预约定金" {...this.formItemLayout} className="formItemStyle">
                                {
                                    getFieldDecorator('logistics_price4')(
                                        <Input placeholder="默认为0"/>
                                    )
                                }
                            </FormItem>
                            <FormItem label="是否可以选商品" {...this.formItemLayout} className="formItemStyle">
                                {

                                    <RadioGroup onChange={this.onChange} value={this.state.value}
                                                style={{paddingTop: 0}}>
                                        <Radio value={1}>是</Radio>
                                        <Radio value={2}>否</Radio>
                                    </RadioGroup>

                                }
                            </FormItem>
                            <FormItem label="是否要选位" {...this.formItemLayout} className="formItemStyle">
                                {

                                    <RadioGroup onChange={this.onChange} value={this.state.value}
                                                style={{paddingTop: 0}}>
                                        <Radio value={1}>是</Radio>
                                        <Radio value={2}>否</Radio>
                                    </RadioGroup>

                                }
                            </FormItem>
                            <FormItem style={{textAlign: 'center', marginTop: '10px'}}>
                               <Button type={'primary'}>保存并设置</Button>
                            </FormItem>
                        </Form>
                    </Col>
                </Row>
            </span>
        )
    };

    clickOk() {

    };

    /**
     * 处理单选事件
     */
    onChange = (e) => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });
    }
};
const AppointmentSettings = Form.create()(AppointmentSetting);

export default prop => (
    <Consumer>
        {
            props => (
                <Settings {...prop} {...props}/>
            )
        }
    </Consumer>
);